<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM CSS</title>
</head>
<body>
    <!--
        主要演示 使用
    -->
    <p id="p1">Hello World!</p>
    <p id="p2">Hello World!</p>

    <!--  Js 修改 css的 color -->
    <!--  这里没有使用脚本 而是使用的直接使用了 document的属性设置 -->
    <button type="button"
            onclick="document.getElementById('p2').style.color='red'">
        点击这里！
    </button>

    <!-- css visibility 的一个简单的测试 -->
    <p id="p3">测试显示和影藏文本</p>
    <input type="button" value="隐藏文本" onclick="document.getElementById('p3').style.visibility='hidden'" />
    <input type="button" value="显示文本" onclick="document.getElementById('p3').style.visibility='visible'" />

</body>
</html>